import React, { Component } from 'react'
import PropTypes from 'prop-types'
class Head extends Component {
	render() {
		return (
			<div>
				<Title></Title>
			</div>
		)
	}
}

class Main extends Component {
	render() {
		return (
			<div>
				<Content></Content>
			</div>
		)
	}
}
class Title extends Component {
	static contextTypes = {
		themeColor: PropTypes.string,
	}
	render() {
		return (
			<div>
				<p style={{ color: this.context.themeColor }}>
					react.js 小书标题
				</p>
			</div>
		)
	}
}
class Content extends Component {
	static contextTypes = {
		themeColor: PropTypes.string,
	}
	render() {
		return (
			<div>
				<p style={{ color: this.context.themeColor }}>
					react.js 小书内容
				</p>
			</div>
		)
	}
}

export default class ContextIndex extends Component {
	// 指定 主题类型 如果使用 context 那就必须写这个
	static childContextTypes = {
		themeColor: PropTypes.string,
	}
	state = {
		themeColor: 'red',
	}
	// 设置自组件接收到的值
	getChildContext() {
		return { themeColor: this.state.themeColor }
	}
	changeColor = () => {
		this.setState({
			themeColor: 'cyan',
		})
	}
	render() {
		return (
			<div>
				<h3>Context使用</h3>
				<div className="Box">
					<button onClick={this.changeColor}>更换主题</button>
					<Head></Head>
					<Main></Main>
				</div>
			</div>
		)
	}
}
